<script setup>
import useStore from "@/store/index.js"
import {computed, getCurrentInstance} from "vue";
const {proxy} = getCurrentInstance();

const { userInfo } = useStore()
const user = computed(() => userInfo.userInfo)


</script>

<template>
  <div class="text-[14px] bg-[#d54431] text-[#fff] main pb-[10px]">
    <div class="text-[18px] text-center">个人中心</div>
    <div class="p-[20px] flex justify-between">
      <div class="flex" v-if="user.id">
        <div class="w-[70px] h-[70px] rounded-[50%] overflow-hidden">
          <van-image :src="user.avatar" class="w-full aspect-[1]">
            <template v-slot:loading>
              <van-loading type="spinner" size="20"/>
            </template>
          </van-image>
        </div>
        <div class="flex flex-col ml-[10px] justify-center">
          <span>{{ user.username }}</span>
          <span class="text-[#ccc]">{{ user.phone }}</span>
        </div>
      </div>
      <div v-else>
        <van-button type="primary" round @click="proxy.$router.push('/login')">
          <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="2000"
              :touchable="false"
              :show-indicators="false"
          >
            <van-swipe-item>未登录</van-swipe-item>
            <van-swipe-item>点击登录</van-swipe-item>
          </van-swipe>
        </van-button>
      </div>
      <div class="flex items-center">
        <van-icon name="setting-o" size="20" class="mr-[10px]"/>
        <van-icon name="chat-o" size="20"/>
      </div>
    </div>
    <div class="px-[20px] my-radius">
      <div class="bg-[#39383d] p-[10px] px-[20px] flex justify-between vipCrad">
        <div class="text-[]20px">V1</div>
        <div>查看会员卡 ></div>
      </div>
    </div>
  </div>
  <div class="p-[20px]">
    <div class="bg-[#fff] mt-[15px] py-[10px] px-[20px] text-[14px] flex rounded-[10px] justify-between">
      <div class="flex flex-col items-center">
        <span class="mb-[5px]">0.00</span>
        <span>余额</span>
      </div>
      <div class="flex flex-col items-center">
        <span class="mb-[5px]">0</span>
        <span>优惠卷</span>
      </div>
      <div class="flex flex-col items-center">
        <span class="mb-[5px]">0</span>
        <span>积分</span>
      </div>
      <div class="flex flex-col items-center">
        <span class="mb-[5px]">0</span>
        <span>收藏</span>
      </div>
      <div class="flex flex-col items-center">
        <span class="mb-[5px]">1</span>
        <span>浏览记录</span>
      </div>
    </div>
    <div class="bg-[#fff] mt-[15px] py-[10px] px-[20px] text-[14px] rounded-[10px]">
      <div class="flex justify-between">
        <h2 class="font-bold">订单中心</h2>
        <div class="text-[#ccc]">查看余额 ></div>
      </div>
      <div class="flex justify-between mt-[20px]">
        <div class="flex flex-col items-center">
          <span class="mb-[5px]">0.00</span>
          <span>余额</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="mb-[5px]">0</span>
          <span>优惠卷</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="mb-[5px]">0</span>
          <span>积分</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="mb-[5px]">0</span>
          <span>收藏</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="mb-[5px]">1</span>
          <span>浏览记录</span>
        </div>
      </div>
    </div>
    <div class="bg-[#fff] mt-[15px] py-[10px] px-[20px] text-[14px] rounded-[10px]">
      <div class="font-bold text-[16px] mb-[10px]">我的服务</div>
      <div class="service">
        <div v-for="item in 10">
          <div class="rounded-[50%] overflow-hidden">
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" class="w-full aspect-[1]">
              <template v-slot:loading>
                <van-loading type="spinner" size="20"/>
              </template>
            </van-image>
          </div>
          <div class="text-[12px] mt-[5px]">积分兑换</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.vipCrad {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative;
  z-index: 9999;
}

.my-radius {
  position: relative;
}


.my-radius::after {
  left: 0;
  bottom: -24px;
  width: 100%;
  border-radius: 50%; // 控制弧度效果 越大弧度越自然
  background: #d54431;
  content: "";
  height: 3.5vh; // 控制椭圆高度
  position: absolute; // 关键***
}

.service {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}

.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>
